import { useEffect, useState } from "react";

interface VulnerabilityCountProps {
  count: number;
  color: string;
  severity: string;
  width: number;
}

interface VulnerabilitySeverityCardsProps {
  counts: {
    critical: number;
    high: number;
    medium: number;
    low: number;
    informational: number;
  };
}

export const VulnerabilityCount: React.FC<VulnerabilityCountProps> = ({
  count,
  color,
  severity,
  width,
}) => {
  //Force add tailwind styles (nextjs + tailwind won't automatically add style classes that are generated dynamically)
  //bg-red-200 dark:bg-red-700 bg-orange-200 dark:bg-orange-700 bg-yellow-200 dark:bg-yellow-700 bg-green-200 dark:bg-green-700 bg-blue-200 dark:bg-blue-700
  return (
    <div
      style={{ width: `${width}px` }}
      className={`flex flex-col items-center rounded-md p-4 bg-${color}-200 dark:bg-${color}-700`}
    >
      <span className="text-2xl font-semibold">{count}</span>
      <span className="text-sm font-light">{severity}</span>
    </div>
  );
};

export const VulnerabilitySeverityCardsVertical: React.FC<
  VulnerabilitySeverityCardsProps
> = ({ counts }) => {
  return (
    <div className="ml-4 mt-4 flex flex-col gap-2">
      <VulnerabilityCount
        width={120}
        severity="Critical"
        count={counts.critical}
        color="red"
      />
      <VulnerabilityCount
        width={120}
        severity="High"
        count={counts.high}
        color="orange"
      />
      <VulnerabilityCount
        width={120}
        severity="Medium"
        count={counts.medium}
        color="yellow"
      />
      <VulnerabilityCount
        width={120}
        severity="Low"
        count={counts.low}
        color="green"
      />
      <VulnerabilityCount
        width={120}
        severity="Informational"
        count={counts.informational}
        color="blue"
      />
    </div>
  );
};

export const VulnerabilitySeverityCardsHorizontal: React.FC<
  VulnerabilitySeverityCardsProps
> = ({ counts }) => {
  const [width, setWidth] = useState(44);

  useEffect(() => {
    // Function to set width based on screen size
    const updateWidth = () => {
      const windowWidth = window.innerWidth;

      // Tailwind's breakpoints
      if (windowWidth >= 1280) {
        // lg
        setWidth(170);
      } else if (windowWidth >= 768) {
        // md
        setWidth(100);
      } else {
        // sm
        setWidth(55);
      }
    };

    // Update width initially
    updateWidth();

    // Listen for window resize events
    window.addEventListener("resize", updateWidth);

    // Cleanup
    return () => {
      window.removeEventListener("resize", updateWidth);
    };
  }, []);

  return (
    <div className="ml-4 mt-4 flex flex-row gap-4">
      <VulnerabilityCount
        width={width}
        severity="Critical"
        count={counts.critical}
        color="red"
      />
      <VulnerabilityCount
        width={width}
        severity="High"
        count={counts.high}
        color="orange"
      />
      <VulnerabilityCount
        width={width}
        severity="Medium"
        count={counts.medium}
        color="yellow"
      />
      <VulnerabilityCount
        width={width}
        severity="Low"
        count={counts.low}
        color="green"
      />
      <VulnerabilityCount
        width={width}
        severity="Informational"
        count={counts.informational}
        color="blue"
      />
    </div>
  );
};
